<!-- src/pages/home/index.vue -->
<template>
  <view class="discover-container">
    <!-- 搜索区域 -->
    <view class="search-section">
      <wd-search
        v-model="searchText"
        placeholder="搜索技术问题、文章或帖子"
        @search="onSearch"
      />
    </view>

    <!-- 标签页 -->
    <view class="tab-section">
      <wd-tabs v-model="activeTab">
        <wd-tab title="最新动态"></wd-tab>
        <wd-tab title="热门文章"></wd-tab>
      </wd-tabs>
    </view>

    <!-- 最新动态列表 -->
    <view class="posts-list">
      <view class="dev-list-card" v-for="(item, index) in postsList" :key="index">
        <view class="card-header">
          <view class="left">
            <image class="dev-avatar" :src="item.avatar" mode="aspectFill" />
            <view class="dev-info">
              <view class="dev-name">{{ item.author }}</view>
              <view class="dev-exp">{{ item.time }}</view>
            </view>
          </view>
        </view>
        
        <view class="dev-desc">{{ item.title }}</view>
        <view class="post-content">{{ item.description }}</view>

        <view class="card-footer">
          <view class="post-stats">
            <text class="stat-item">
              <text class="iconfont icon-eye"></text>
              {{ item.views }}
            </text>
            <text class="stat-item">
              <text class="iconfont icon-comment"></text>
              {{ item.comments }}
            </text>
            <text class="stat-item">
              <text class="iconfont icon-like"></text>
              {{ item.likes }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const searchText = ref('')
const activeTab = ref(0)

const onSearch = (value: string) => {
  console.log('搜索:', value)
}

const postsList = ref([
  {
    author: '张伟明',
    avatar: '/static/images/avatar1.png',
    time: '2小时前',
    title: 'Vue3 + TypeScript 最佳实践总结',
    description: '分享在实际项目中使用Vue3搭配TypeScript的经验，包括项目配置、组件封装、状态管理等方面的最佳实践...',
    views: '1.2k',
    comments: '56',
    likes: '238'
  },
  // 可以添加更多数据...
])
</script>

<style lang="scss" scoped>
.discover-container {
  padding: 20rpx;
  background: #f5f5f5;

  .search-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 20rpx;
  }

  .tab-section {
    margin: 20rpx 0;
    background: #fff;

    :deep(.wd-tabs__nav-wrap) {
      &::-webkit-scrollbar {
        display: none;
      }
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    :deep(.wd-tabs__line) {
      background-color: #000 !important;
    }

    :deep(.wd-tab.is-active) {
      color: #000 !important;
    }
  }

  .dev-list-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .left {
        display: flex;
        align-items: center;
      }
      
      .dev-avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        margin-right: 20rpx;
      }
      
      .dev-info {
        .dev-name {
          font-size: 32rpx;
          font-weight: bold;
        }
        
        .dev-exp {
          font-size: 24rpx;
          color: #666;
        }
      }
    }

    .dev-desc {
      font-size: 32rpx;
      font-weight: bold;
      margin: 20rpx 0;
    }

    .post-content {
      font-size: 28rpx;
      color: #666;
      margin: 20rpx 0;
      line-height: 1.6;
    }
    
    .card-footer {
      .post-stats {
        display: flex;
        align-items: center;
        
        .stat-item {
          display: flex;
          align-items: center;
          margin-right: 32rpx;
          color: #999;
          font-size: 26rpx;

          .iconfont {
            margin-right: 8rpx;
          }
        }
      }
    }
  }
}
</style>